<template>
  <div class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="layout-header">
      <div class="header-content">
        <!-- Logo区域 -->
        <div class="logo-section">
          <img src="@/assets/vue.svg" alt="Logo" class="logo" />
          <span class="logo-text">Test Manager</span>
        </div>
        
        <!-- 用户信息区域 -->
        <div class="user-section">
          <el-dropdown @command="handleUserCommand">
            <span class="user-info">
              <el-avatar :size="30" icon="user-filled" />
              <span class="username">{{ userInfo.name || '管理员' }}</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主体内容区域 -->
    <el-container class="main-container">
      <!-- 左侧菜单 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="layout-aside">        
        <el-menu
          :default-active="activeMenu"
          class="menu"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-menu-item index="/home">
            <el-icon><house /></el-icon>
            <template #title>首页</template>
          </el-menu-item>
          <el-menu-item index="/about">
            <el-icon><document /></el-icon>
            <template #title>关于</template>
          </el-menu-item>
          <el-sub-menu index="system">
            <template #title>
              <el-icon><setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/users"><el-icon><user /></el-icon>用户管理</el-menu-item>
            <el-menu-item index="/roles"><el-icon><Grid /></el-icon>角色管理</el-menu-item>
            <el-menu-item index="/permissions"><el-icon><Tools /></el-icon>权限管理</el-menu-item>
            <el-menu-item index="/404"><el-icon><NoSmoking /></el-icon>404Test</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <div class="toggle-button" @click="toggleCollapse">
          <el-icon>
            <expand v-if="isCollapse" />
            <fold v-else />
          </el-icon>
        </div>
      </el-aside>

      <!-- 右侧主功能展示区 -->
      <el-main class="layout-main">
        <router-view></router-view>        
      </el-main>
    </el-container>

    <!-- 底部页脚 -->
    <el-footer class="layout-footer">
      <div class="footer-content">
        <p>© 2025 管理系统. All Rights Reserved.</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'

export default {
  name: 'Index',
  data() {
    return {
      activeMenu: '/home',
      isCollapse: false,
      screenWidth: document.body.clientWidth
    }
  },
  computed: {
    userInfo() {
      const authStore = useAuthStore()
      return authStore.userInfo
    }
  },
  watch: {
    '$route'(to) {
      // 根据当前路由更新激活的菜单项
      this.activeMenu = to.path
    }
  },
  mounted() {
    // 组件挂载时也根据当前路由设置激活菜单项
    this.activeMenu = this.$route.path
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
    
    // 初始化时判断屏幕大小
    this.handleResize()
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleResize() {
      this.screenWidth = document.body.clientWidth
      // 当屏幕宽度小于等于768px时，自动收缩菜单
      this.isCollapse = this.screenWidth <= 768
    },
    handleUserCommand(command) {
      switch (command) {
        case 'profile':
          console.log('查看个人资料')
          break
        case 'settings':
          console.log('打开设置')
          break
        case 'logout':
          // 使用Pinia store处理登出
          const authStore = useAuthStore()
          authStore.logout()
          this.$router.push('/login')
          break
      }
    }
  }
}
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-header {
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
  height: 60px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.user-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
}

.username {
  margin: 0 10px;
  font-size: 14px;
}

.main-container {
  flex: 1;
}

.layout-aside {
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  border-right: 1px solid #e6e6e6;
}

.menu {
  border-right: none;
  flex: 1;
  overflow-y: auto;
  background-color: transparent;
}

.menu :deep(.el-menu) {
  background-color: transparent;
  border-right: none;
}

.menu :deep(.el-menu-item), 
.menu :deep(.el-sub-menu__title) {
  color: #333;
  transition: all 0.3s ease;
}

.menu :deep(.el-menu-item:hover),
.menu :deep(.el-sub-menu__title:hover) {
  color: #409eff;
  background-color: #f5f7fa !important;
}

.menu :deep(.el-menu-item.is-active) {
  color: #409eff;
  background-color: #ecf5ff !important;
}

.layout-main {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}

.welcome-content {
  background-color: #fff;
  padding: 40px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.layout-footer {
  background: #ffffff;
  border-top: 1px solid #e6e6e6;
  padding: 0;
  height: 60px !important;
  color: #333;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
}

.toggle-button {
  background-color: #f5f7fa;
  color: #333;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.toggle-button:hover {
  background-color: #ecf5ff;
}
</style>